<%
  String nombre = App.Sesion.getNombre();
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Man&Uuml; - Gerente</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link title="default" rel="stylesheet" href="Estilos/css/bootstrap.css" type="text/css" />
        <script src="Estilos/js/jquery.js"></script>
        <script src="Estilos/js/bootstrap.js"></script>
        <script src="Estilos/js/jquery.validate.min.js"></script>
        <script src="Estilos/js/bootstrap-modal.js"></script>
        <link rel="stylesheet" type="text/css" href="calendar/codebase/dhtmlxcalendar.css">
        <link rel="stylesheet" type="text/css" href="calendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
        <script src="calendar/codebase/dhtmlxcalendar.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            body{
                background: url('img/bg.png') 0px -100px repeat-x;
                margin: 30px 0 0 0;
            }
            label.error {
                color: red;
            }
        </style>
        <script>
            var myCalendar;
            function ValidarCorreo(email){
                var formato = /^([\w-\.\+])+@([\w-]+\.)+([a-z]){2,4}$/;
                var comparacion = formato.test(email);
                return comparacion;
            }
            $(document).ready(function() {
                myCalendar = new dhtmlXCalendarObject(["fecha"]);
                
                $("#addEmail").click(function() {
                    
                    if(ValidarCorreo($.trim($("#mail").val())) == true) {
                        $("#multiSelect").append('<input checked="checked" type="checkbox" name="correo" id="correo" value="'+$("#mail").val()+'" />&nbsp;' +$("#mail").val()+"<br/>");
                    }
                    else{
                        $("#mail").attr('value','');
                        alert("Ese no es un correo v\u00e1lido");
                        return;
                    }
                    //hacer q la casilla se vuelva vacia..!!
                    $("#mail").attr('value','');
                    $("#enviar").attr('style', 'visibility: visible');
                    $('#mail').focus();
                });
                
            });
	</script>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="javascript:void(0);"><%=(nombre==null?"Juan":nombre) %></a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="javascript:void(0);">Gerente</a>
                            </li>
                        </ul>
                    </div>
                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li class="">
                                <a href="index.jsp">Salir</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <% if(request.getParameter("mensaje")!=null) { %>
            <div id="info" class="modal hide fade">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3>Informaci&oacute;n</h3>
                </div>
                <div class="modal-body">
                    <h1><%=request.getParameter("mensaje") %></h1>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary" data-dismiss="modal">Aceptar</a>
                </div>
            </div>
            <script>
                $('#info').modal({
                    keyboard: false
                });
            </script>
        <% } %>
        <div class="container-fluid">
            <div class="row-fluid" style="background:url('img/manuPet.png') no-repeat 400px -200px; height: 800px;" >
                <% if( request.getParameter("sendMail") == null ){ %>
                <div class="span6">
                    <div class="hero-unit">
                        <h1>Man&uuml;</h1>
                        <p class="lead">Crea tu proyecto</p>
                        <br/>
                        <form action="ServletCreateProject" method="POST" class="form-horizontal" id="createProForm">

                            <div class="control-group">
                                <label for="nombre" class="control-label">Nombre del proyecto</label>
                                <div class="controls">
                                    <input class="input-xlarge" placeholder="Mi Proyecto" name="nombre" id="nombre" type="text" data-provide="typeahead"/> 
                                </div>
                            </div>    
                            <div class="control-group">
                                <label for="empresa" class="control-label">Empresa</label>
                                <div class="controls">
                                    <input class="input-xlarge" placeholder="Liminal" name="empresa" id="empresa" type="text" data-provide="typeahead"/> 
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="fecha" class="control-label">Fecha de inicio</label>
                                <div class="controls">
                                    <input class="input-xlarge" placeholder="30-08-2012" name="fecha" id="fecha" type="text" data-provide="typeahead" autocomplete="off" readonly="readonly"/> 
                                </div>
                            </div>    
                            <div class="control-group">
                                <label for="descripcion" class="control-label">Descripci&oacute;n</label>
                                <div class="controls">
                                    <textarea class="input-xlarge" placeholder="Breve descripci&oacute;n" name="descripcion" id="descripcion"></textarea>
                                </div>
                            </div>
                            <div class="form-actions">
                                    <input class="btn btn-warning " type="submit" value="Crear Proyecto">
                            </div>
                        </form>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        $("#createProForm").validate({
                            rules: {
                                    nombre: {
                                            required:true,
                                            minlength: 2
                                    },
                                    empresa:{
                                            required:true,
                                            minlength: 2
                                    },
                                    fecha: {
                                            required: true,
                                            date: true
                                    },
                                    descripcion: {
                                            required: true,
                                            minlength: 5
                                    }
                            },
                            messages: {
                                    nombre: {
                                            required: "Por favor ingresa el nombre del proyecto",
                                            minlength: "El nombre del proyecto debe tener almenos 2 caracteres"
                                    },
                                    empresa: {
                                            required: "Por favor ingresa el nombre de la empresa",
                                            minlength: "El nombre de la empresa debe tener almenos 2 carateres"
                                    },
                                    fecha:{
                                            required: "Por favor ingresa la fecha de inicio del proyecto",
                                            date: "Por favor ingresa una fecha v&aacute;lida"
                                    },
                                    descripcion: {
                                            required: "Por favor ingresa una contrase&ntilde;a",
                                            minlength: "Contrase&ntilde;a demasiado corta"
                                    }
                            }
                        });
                    });
                </script>
                <% }else if( request.getParameter("sendMail").compareTo("true") == 0 ){ %>
                <div class="span6">
                    <div class="hero-unit">
                        <h1>Man&uuml;</h1>
                        <p class="lead">Envia invitaciones a tus colaboradores</p>
                        <form action="inviteCollaborators.do" method="POST" class="form-horizontal" id="sendM">
                            <div class="control-group">
                                <label class="control-label" for="mail">Escribe su correo</label>
                                <div class="controls">
                                    <div class="input-append">
                                        <input class="span2" id="mail" name="mail" size="16" type="text"><button class="btn" type="button" id="addEmail">Agregar!</button>
                                    </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Enviar invitaci&oacute;n a</label>
                                <div class="controls" id="multiSelect">
                                </div>
                            </div>
                            <div class="form-actions" >
                                <input type="submit" button class="btn btn-warning"  value="Enviar Correos" id="enviar" style="visibility: hidden;">
                                    <% if( request.getParameter("d") == null  ){ %>
                                    <a href="index.jsp" class="btn btn-primary">Omitir</a>
                                    <% }else{ %>
                                    <a href="juan2.html" class="btn btn-primary">Volver</a>
                                    <% } %>
                            </div>
                        </form>
                    </div> 
                </div>
                <script>
                    $(document).ready(function() {
                        $("#sendM").validate({
                            rules: {
                                correo: {
                                    required: true,
                                    minlength: 1
                                }
                            },
                             messages: {
                                correo: "Por selecciona almenos uno de los correos que agregaste"
                             }
                        });
                    });
                </script>
                <% } %>
            </div>
        </div>
        
    </body>
</html>